<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - AI故事生成器</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href='/static/css/1.css'>
    <link rel="stylesheet" href="/static/css/header.css">
    <link rel="stylesheet" href="/static/css/footer.css">
    <link rel="stylesheet" href="/static/css/about.css">
    <script src="/static/js/header.js" defer></script>
</head>
<body>
    <!-- 导航栏 -->
    {% include 'header.html' %}

    <main class="container">
        <h1>关于我们</h1>

        <div class="about-content">
            <section>
                <h2>我们的使命</h2>
                <p>让每个人都能成为创作者，通过AI技术降低故事创作的门槛，激发无限想象力。</p>
            </section>

            <section>
                <h2>我们的技术</h2>
                <p>采用最先进的自然语言处理和生成式AI技术，能够理解上下文并创造连贯、有趣的故事内容。</p>
            </section>

            <section>
                <h2>团队介绍</h2>
                <div class="team-members">
                    <!-- 团队成员 -->
                    <div class="team-member">
                        <div class="member-img" style="background-image: url('/static/img/member4.jpg')"></div>
                        <h3>冯翔宇</h3>
                    </div>
                    <div class="team-member">
                        <div class="member-img" style="background-image: url('/static/img/member4.jpg')"></div>
                        <h3>张伟</h3>
                    </div>
                    <div class="team-member">
                        <div class="member-img" style="background-image: url('/static/img/member4.jpg')"></div>
                        <h3>黄宇扬</h3>
                    </div>
                    <div class="team-member">
                        <div class="member-img" style="background-image: url('/static/img/member4.jpg')"></div>
                        <h3>陈展</h3>
                    </div>
                </div>
            </section>

            <section>
                <h2>联系我们</h2>

                <!-- 消息显示区域 -->
                <div id="message-container"></div>

                <form id="contact-form" class="contact-form">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" name="name" id="name" placeholder="您的姓名" required>
                        <div class="error-text" id="name-error"></div>
                    </div>

                    <div class="form-group">
                        <input type="email" name="email" id="email" placeholder="您的邮箱" required>
                        <div class="error-text" id="email-error"></div>
                    </div>

                    <div class="form-group">
                        <textarea name="message" id="message" placeholder="您的消息" required></textarea>
                        <div class="error-text" id="message-error"></div>
                    </div>

                    <div class="loading" id="loading">
                        <div class="spinner"></div>
                        <p>提交中...</p>
                    </div>

                    <button type="submit" id="submit-btn">发送消息</button>
                </form>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    {% include 'footer.html' %}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contact-form');
            const messageContainer = document.getElementById('message-container');
            const loading = document.getElementById('loading');
            const submitBtn = document.getElementById('submit-btn');

            // 阻止表单的默认提交行为
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                submitForm();
            });

            function submitForm() {
                // 获取表单数据
                const formData = new FormData(contactForm);
                const name = document.getElementById('name').value.trim();
                const email = document.getElementById('email').value.trim();
                const message = document.getElementById('message').value.trim();

                // 清除之前的错误信息
                clearErrors();

                // 客户端验证
                let isValid = true;

                if (!name) {
                    showError('name-error', '请输入您的姓名');
                    isValid = false;
                }

                if (!email) {
                    showError('email-error', '请输入您的邮箱');
                    isValid = false;
                } else if (!isValidEmail(email)) {
                    showError('email-error', '请输入有效的邮箱地址');
                    isValid = false;
                }

                if (!message) {
                    showError('message-error', '请输入您的消息');
                    isValid = false;
                }

                if (!isValid) {
                    showMessage('请完善表单信息', 'error');
                    return;
                }

                // 显示加载状态
                loading.style.display = 'block';
                submitBtn.disabled = true;

                // 发送AJAX请求
                fetch('', {  // 空字符串表示当前URL
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': getCookie('csrftoken')
                    },
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.json();
                })
                .then(data => {
                    // 隐藏加载状态
                    loading.style.display = 'none';
                    submitBtn.disabled = false;

                    if (data.success) {
                        // 显示成功消息
                        showMessage(data.message, 'success');
                        // 清空表单
                        contactForm.reset();
                    } else {
                        // 显示错误消息
                        showMessage(data.message, 'error');
                    }
                })
                .catch(error => {
                    // 隐藏加载状态
                    loading.style.display = 'none';
                    submitBtn.disabled = false;
                    showMessage('网络错误，请稍后重试: ' + error.message, 'error');
                    console.error('Error:', error);
                });
            }

            // 显示消息的函数
            function showMessage(message, type) {
                messageContainer.innerHTML = `
                    <div class="alert alert-${type}">
                        ${message}
                    </div>
                `;

                // 5秒后自动消失（错误消息不自动消失）
                if (type === 'success') {
                    setTimeout(() => {
                        messageContainer.innerHTML = '';
                    }, 5000);
                }
            }

            // 显示错误信息
            function showError(elementId, message) {
                const errorElement = document.getElementById(elementId);
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }

            // 清除所有错误信息
            function clearErrors() {
                const errorElements = document.querySelectorAll('.error-text');
                errorElements.forEach(element => {
                    element.style.display = 'none';
                    element.textContent = '';
                });
            }

            // 验证邮箱格式
            function isValidEmail(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }

            // 获取CSRF token
            function getCookie(name) {
                let cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    const cookies = document.cookie.split(';');
                    for (let i = 0; i < cookies.length; i++) {
                        const cookie = cookies[i].trim();
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
        });
    </script>
</body>
</html>